<html>

<head> 
<script type="text/javascript" src="../../html/prototype.js"></script>
<script type="text/javascript" src="../../html/rico21/src/rico.js"></script>

	<style>
	/*struct style*/
	
	*{padding:0; margin:0;}
	a{ text-decoration:none; }
	ul{ text-align:center;}
	li{ list-style:none; display:inline;}
	img{ border:0;}
	
	/**
		form
	*/
	form .row{ margin:20px 0; clear:both; padding:2px; }

	form .row label {width:160px;float:left;display:block;}

	form .row input{ height:22px;font-size:125%;}
        form .row input[type=text] { width : 230px; }
        form .row input[type=password] { width : 230px; }
	
	form .row .text{}
	form .row .passwd{}
	
	form .captcha{ margin-left:30%;}
	
	form .submit{padding:5px; margin-top:40px; background:#cee;}
	
	
	
	.content{ width:96%; margin:auto; height:auto; }
	
	body{ width:100%; font-family:Comic Sans MS, Calibri, Arial, Helvetica, sans-serif; font-size:12px; }
	#pro_header{ width:100%; height:16px;border-bottom:1px dotted #bdd;}
		#pro_header *{ margin:0 5px 0 0;}
		#pro_header .sign{float:left; color:#069;}
		#pro_header .username{float:right;} 
		#pro_header a{color:#069;}
		#pro_header a:hover{text-decoration:underline;}
		
	
	#header { width:100%; height:70px;}
		#header .title{ font-size:250%; font-weight:lighter; color:#069; float:left;}
		#header .ico{ float:left; margin:5px; height:45px; width:45px; }
		#header .acm_icpc{ float:right; }
	
	#nav { height:19px; width:100%;font-size:115%;}
		#nav a{ margin: 0 15px; padding:0 10px;text-align:center; background:#bdd; color:#688;}
		#nav .active{ background:#dee;}
		#nav a:hover{ background:#dee; text-decoration:underline;}
	#sub_nav { height:19px; width:100%; background:#dee; font-size:115%;}
	
	#left{ width:15%; height:auto;float:left; margin:2px;}
		#left fieldset{ border:1px solid #069; padding:1px;}
		#left legend{ color:#069 ; }
	#main{ width:60%; float:left; margin:2px ; height:auto; font-family:Arial, Helvetica, sans-serif;}
	
	#right{ width:20%; height:auto; float:right; margin:2px; }
	
	#footer{ width:100%; text-align:center; color:#069; clear:both; border-top:1px dotted #ddd; }
	/*
		form style
	*/

	div.error{ background:#Fdd;color:#a00;padding:5px; margin:5px 0; font-size:120%;}

	#signin{ width:60%; height:auto; padding:2px; margin:2px; border:1px solid #bdd; font-family:Arial, Helvetica, sans-serif;}
		#signin form label{ color:#003366; font-size:125%; float:left; color:#006699;}
		#signin  legend{color:#069;padding:1px;}

	/**
		problem_list
	*/
	#problem_list{width:100%;}
		#problem_list table{ width:100%;border-collapse:collapse;}
		#problem_list caption{
			padding:5px;
			width:100%;	 
			text-align:left;
			color:#999;
		}
		#problem_list th{
			color: #4f6b72;
			background:#dee;
			border: 1px solid #C1DAD7;
		    letter-spacing: 3px;
			text-transform: uppercase;
			text-align: left;
			padding: 1px 1px 1px 2px;
			font-weight:lighter;
			font-size:90%;
		}
		#problem_list td{
			border: 1px solid #C1DAD7;
			background: #fff;
			padding: 1px 1px 1px 2px;
			color: #4f6b72;
			font-size:80%;
		}
		#problem_list .spec {
			border-left: 1px solid #C1DAD7;
			background:#eff;
			font-weight:lighter;
		}
	
	/**
		search for problems
	*/
		#problem_search{ width:100%; text-align:center; background:#eee;margin-top:15px;}
			#problem_search label{ color:#bbc; font-size:100%; text-transform:uppercase;}
			#problem_search input[type=text]{ border:1px solid #ddd;color:#666;}
			#problem_search select{ color:#666; border:1px solid #ddd;}
	
	/**
		pager
	*/
		#pager { width:100%; text-align:center;margin-top:5px; padding:1px;}
			#pager ul{ height:16px; padding:1px; margin:5px;}
			#pager li{ padding:1px; text-align:center;}
			#pager a{ padding:0 4px 0 4px;color:#069; border:1px solid #CCCCCC;}
			#pager a:hover{ background:#bdd; }

	</style>
</head>

<body>

<!-- pro header -->
	<div id="pro_header">
		<div class="sign"><a href="#" >Sign in</a></div>
	<!--	<div class="sign"><a href="#">Sign out</a></div>
		<div class="username">Judasnow</div>
	-->
	</div>
<!-- header -->
	<div id="header">
		<div class="ico"><img src="images.jpeg" /></div>
		<div class="acm_icpc"><img src="acm_icpc.png" /></div>
		<div class="title">Suse acm/icpc online judge#lt?soj</div>
	</div>
	
<!-- dav -->
	<div id="nav">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#" class="active">Contest</a></li>
		<li><a href="#">Problem</a></li>
		<li><a href="#">Ranklist</a></li>
		<li><a href="#">Bbs</a></li>
		<li><a href="#">Hello world</a></li>
	</ul>
	</div>
	<div id="sub_nav">
	</div>
	
	
	<div id="left">
	
	</div>
	<div id="main">
		<div id="problem_list" cellspacing="0" >
		<div id="problem_search">
			<form>
				<label for="search">search:</label>
				<input type="text" name="search"/>
				<label for="search_option">with</label>
				<select>
					<option>problem</option>
					<option>source</option>
				</select>
				<input type="submit" value="serch" />
			</form>
		</div>

			<table>
			<caption>Problems 2101 - 2133 </caption>
				<tr>
					<th>Rank</th>
					<th>username</th>
					<th>nick</th>
					<th>motto</th>
					<th>submit</th>
					<th>ac</th>
				</tr>
				<tr>
    				<td class="spec">1151</th>
    				<td class="spec">Help the problem setter</td>
					<td class="spec">20%</td>
					<td class="spec">10.0</td>
					<td class="spec">20%</td>
					<td class="spec">10.0</td>
 				 </tr>
			 </table>

			<div id="pager">
			<ul>
				<li><a href="#">Priv</a></li>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li>...</li>
				<li><a href="#">99</a></li>
				<li><a href="#">Next</a></li>
			</ul>
		</div>
		</div>
	</div>
	<div id="right"></div>
	
	<div id="footer">{?soj index page?}</div>
</body>

<script type="text/javascript">
//rico ʵ??Բ?? ??¼????????
Rico.loadModule('Corner');
Rico.onLoad( function() {
   var roundCorners = Rico.Corner.round.bind(Rico.Corner);
   roundCorners('signin',{border: '#DBB'});
  // var menus = $$('#nav li').each( function (s) {roundCorners(s,{corners:"top"});} );
});

</script>
</html>
